<template>
  <el-card class="metric-card" :style="{ borderTop: `4px solid ${color}` }">
    <div class="metric-content">
      <div class="metric-icon" :style="{ backgroundColor: iconBg }">
        <el-icon :size="24" :color="color"><component :is="icon" /></el-icon>
      </div>
      <div class="metric-details">
        <div class="metric-title">{{ title }}</div>
        <div class="metric-value">
          {{ prefix }}{{ formattedValue }}{{ suffix }}
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  value: {
    type: [Number, String],
    default: 0
  },
  prefix: {
    type: String,
    default: ''
  },
  suffix: {
    type: String,
    default: ''
  },
  icon: {
    type: String,
    required: true
  },
  color: {
    type: String,
    default: '#409EFF'
  }
});

// 计算图标背景色（带透明度）
const iconBg = computed(() => {
  return `${props.color}15`; // 15是十六进制的透明度，约为10%
});

// 格式化数值显示
const formattedValue = computed(() => {
  const val = parseFloat(props.value);
  if (isNaN(val)) return props.value;
  
  // 根据数值大小选择合适的显示方式
  if (val >= 1000000) {
    return (val / 1000000).toFixed(1) + 'M';
  } else if (val >= 1000) {
    return (val / 1000).toFixed(1) + 'K';
  } else if (Number.isInteger(val)) {
    return val.toLocaleString();
  } else {
    // 如果是小数，保留两位小数
    return val.toFixed(2);
  }
});
</script>

<style scoped>
.metric-card {
  height: 100%;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.metric-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.metric-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.metric-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.metric-details {
  flex: 1;
}

.metric-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.metric-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .metric-icon {
    width: 48px;
    height: 48px;
  }
  
  .metric-value {
    font-size: 20px;
  }
}

@media (max-width: 992px) {
  .metric-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
</style>